<template>
	<view style="padding-bottom: 120rpx;">
		<view>
			<view class="top-box" v-if="goodsInfo.view_user_money<goodsInfo.view_total_order_price">
				<text>{{$t('shop').可用余额不足当前余额}}：{{Currency=='USD'?'$':''}}{{goodsInfo.view_user_money}}</text>
			</view>
			<view class="top-box"
				v-if="goodsInfo.view_user_money>=goodsInfo.view_total_order_price&&goodsInfo.view_total_order_price>goodsInfo.view_month_cap">
				<text>{{$t('shop').已超过本月可兑换上限剩余可兑换}}：{{Currency=='USD'?'$':''}}{{goodsInfo.view_month_cap || 0}}</text>
			</view>
		</view>
		<view class="site-box align-center justify-between" @click="navTo('/pages/address/newAddress?other=1')">
			<view style="width: 600rpx;" v-if="goodsInfo.address">
				<view class="gray3 site-name">{{goodsInfo.address.real_name}}<text
						style="margin-left: 12rpx;">{{goodsInfo.address.phone}}</text></view>
				<view class="site-xq gray9 ft12">
					{{goodsInfo.address.province}}{{goodsInfo.address.city}}{{goodsInfo.address.district}}{{goodsInfo.address.detail}}
				</view>
				<view v-if="!goodsInfo.region_status" class="red ft12 pt10"><text>所选区域不配送</text></view>
			</view>
			<view class=" ft15 bold" v-else><text>{{$t('shop').请选择收货地址}}</text></view>
			<image style="width: 10rpx;" src="../../static/images/fans/right.png" mode="widthFix"></image>
		</view>
		<view class="good-box align-center" v-if="goodsInfo.product">
			<image class="good-img"
				:src="goodsInfo.product.sku[0].image?goodsInfo.product.sku[0].image:goodsInfo.product.cover"
				mode="aspectFill"></image>
			<view class="good-right">
				<view class="good-name clamp2">{{goodsInfo.product.good_name}}</view>
				<view class="good-gg gray9">{{$t('shop').规格}}：{{sku}}</view>
				<view class="align-center justify-between" style="margin-top: 30rpx;">
					<view class="good-price gray3">
						{{userInfo.area==2?'$':''}}{{parseFloat(goodsInfo.product_price)}}
					</view>
					<view class="good-num gray9">x{{goodsInfo.product_num}}</view>
				</view>
			</view>
		</view>
		<view v-if="goodsInfo.product">
			<view class="bgWhite ptb10 plr12 align-center justify-between" v-if="goodsInfo.product.area==2">
				<view class="list-text gray3">{{$t('shop').商品}}</view>
				<view class="list-num">{{userInfo.area==2?'$':''}}{{parseFloat(goodsInfo.total_product_price)}}
				</view>
			</view>
			<view class="bgWhite ptb10 plr12 align-center justify-between" v-if="goodsInfo.product.area==2">
				<view class="list-text gray3">{{$t('shop').运费}}</view>
				<view class="list-num">{{userInfo.area==2?'$':''}}{{goodsInfo.freight}}</view>
			</view>
		</view>
		<view class="list-box align-center justify-between">
			<view class="list-text gray3">{{$t('shop').余额兑换}}</view>
			<view class="list-num">{{userInfo.area==2?'$':''}}{{goodsInfo.total_order_price || 0}}</view>
		</view>

		<view class="list-box align-center justify-between" @click="bcrBtn()">
			<view class="list-text gray3">{{$t('shop').补充人}}</view>
			<view class="align-center">
				<view class="list-sel" :style="bcObj?'color:#333;':''">
					<text v-if="bcObj">{{bcObj==1?$t('shop').本人:$t('shop').直推粉丝}}</text>
					<text v-else>{{$t('shop').去选择}}{{bcObj}}</text>
				</view>
				<image style="width: 10rpx;margin-left: 12rpx;" src="../../static/images/fans/right.png"
					mode="widthFix"></image>
			</view>
		</view>

		<view class="list-box align-center justify-between" v-if="bcObj==2" @click="navTo('/pages/mine/order-fans')">
			<view class="list-text gray3">{{$t('shop').直推粉丝}}</view>
			<view class="align-center">
				<view class="list-sel" v-if="!fsObj">{{$t('shop').选择粉丝}}</view>
				<view class="align-center" v-if="fsObj">
					<image class="list-tx" :src="fsObj.avatar" mode="aspectFill"></image>
					<view>
						<view class="gray3 list-news">{{fsObj.nickname}}</view>
						<view class="gray3 list-news" style="margin-top: 24rpx;">{{fsObj.phone}}</view>
					</view>
				</view>
				<image style="width: 10rpx;margin-left: 12rpx;" src="../../static/images/fans/right.png"
					mode="widthFix"></image>
			</view>
		</view>

		<view class="list-box gray9" style="font-size: 28rpx;background: none;padding-top: 0;">
			{{$t('shop').温馨提示一个订单只能选择一个补充人请仔细确认后再下单一经提交不可修改}}
		</view>
		<view v-if="goodsInfo.view_user_money>=goodsInfo.view_total_order_price && goodsInfo.view_total_order_price<=goodsInfo.view_month_cap && goodsInfo.region_status && (this.bcObj==1|| (this.bcObj==2&&this.fsObj!=''))
" class="dh-box" @click="tjBtn()">
			<view class="dh-btn">{{$t('shop').提交}}</view>
		</view>
		<!-- " -->
		<view v-else class="dh-box" @click="notjBtn()">
			<view class="dh-nobtn">{{$t('shop').提交}}</view>
		</view>
		<lyy-pass-input ref="passInput" :title="$t('shop').支付金额" :money="goodsInfo.total_order_price"
			:view_user_money="Number(goodsInfo.view_user_money)" :user_money="Number(user_money)"
			@confirm="confirm"></lyy-pass-input>
		<!-- 底部弹窗 -->
		<view>
			<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
				<view class="bgWhite ptb10" style="border-radius: 22rpx 22rpx 0 0;">
					<view class="tc ptb10" v-for="(item,index) in buchongList" :key="index" @click="selbuchong(index)">
						<text>{{$t('shop')[item]}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 底部弹窗   是否是指默认密码 -->
		<view class="tc">
			<u-modal :showCancelButton="true" :confirmText="$t('set').去设置" confirmColor="#F44A42" cancelColor="#333333"
				:cancelText="$t('common').取消" width="600rpx" :show="show" :content="$t('set').为保障您的账户安全请先设置支付密码"
				:closeOnClickOverlay="closeOnClickOverlay" @cancel="cancel()" @close="cancel()"
				@confirm="goset()"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				closeOnClickOverlay: true,
				bcObj: "", //补充信息
				fsObj: "", //粉丝信息
				total_money: '',
				view_user_money: '',
				good_id: '', //商品id
				sku_id: '', //商品规格id
				product_num: '', //商品数量
				sku: '', //商品规格
				goodsInfo: {}, // 商品信息,
				order_sn: '', //订单号
				supp_uid: '', //直推粉丝id
				// curreny: uni.getStorageSync('currency'), //币种
				buchongList: ['本人', '直推粉丝'],
				rate: '',
				user_money: '' //转化后的价格  
			}
		},
		onLoad(options) {
			this.$store.dispatch('getuserInfo')
			this.good_id = options.good_id
			this.sku_id = options.sku_id
			this.product_num = options.product_num
			this.sku = options.sku
			uni.setNavigationBarTitle({
				title: this.$t('shop').确认订单
			})
			this.rate = uni.getStorageSync('rate')
		},

		onShow() {
			let obj = uni.getStorageSync('ztfsObj');
			if (obj) {
				this.fsObj = obj;
				this.supp_uid = obj.id
				// uni.removeStorageSync('ztfsObj');
			} else {
				// this.bcObj = ''
				// this.fsObj = '';
				// this.supp_uid = ''
				// uni.removeStorageSync('ztfsObj');
			}
			this.confirmOrder()

		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			Currency() {
				return this.$store.state.currency
			}
		},
		methods: {
			// 补充人选择
			bcrBtn() {
				this.$refs.popup.open()
				// let that = this;
				// uni.showActionSheet({
				// 	itemList: [this.$t('shop').本人, this.$t('shop').直推粉丝],
				// 	success: function(res) {
				// 		console.log(res.tapIndex)
				// 		that.bcObj = res.tapIndex + 1
				// 		if (that.bcObj == 1) {
				// 			that.fsObj = '';
				// 			that.supp_uid = ''
				// 			that.confirmOrder()
				// 		}
				// 	},
				// 	fail: function(res) {

				// 	}
				// });

			},
			selbuchong(index) {
				this.bcObj = index + 1
				if (this.bcObj == 1) {
					this.fsObj = '';
					this.supp_uid = ''
					this.confirmOrder()
					uni.removeStorageSync('ztfsObj');
				}
				this.$refs.popup.close()
			},
			// 获取邮费
			async confirmOrder() {
				// console.log(this.bcObj, this.supp_uid)
				let supp_type = ''
				if (this.supp_uid == '' && this.bcObj != 1) {
					supp_type = ''
				} else {
					supp_type = this.bcObj
				}
				const res = await this.$api.ordercheck({
					good_id: this.good_id,
					sku_id: this.sku_id,
					product_num: this.product_num,
					address_id: this.address_id || '',
					supp_type: supp_type,
					supp_uid: this.supp_uid
				})
				this.goodsInfo = res.data
				// console.log(this.goodsInfo.address)
				this.user_money = this.Currency == 'CNY' ? (this.goodsInfo.user_money * this.rate).toFixed(2) : this.goodsInfo.user_money
			},
			//获取地址
			chooseAddress(item) {
				console.log(item);
				this.goodsInfo.address = item
				// console.log(this.goodsInfo.address)
				this.address_id = item.address_id
			},
			//取消
			cancel() {
				this.show = false
			},
			// 提交
			async tjBtn() {
				console.log(this.goodsInfo.address)
				if (!this.goodsInfo.address || this.goodsInfo.address.length <= 0) {
					return this.$utils.msg(this.$t('shop').请选择地址)
				}
				if (!this.bcObj) {
					return this.$utils.msg(this.$t('shop').请选择能量补充人)
				}
				console.log(this.fsObj)
				if (this.bcObj == 2) {
					if (!this.fsObj) {
						return this.$utils.msg(this.$t('shop').请选择直推粉丝)
					}
				}
				if (!this.userInfo.pay_password) {
					// uni.showModal({
					// 	content: this.$t('shop').请设置支付密码,
					// 	cancelText: this.$t('common').取消,
					// 	confirmText: this.$t('common').确认,
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: ''
					// 			})
					// 		} else if (res.cancel) {

					// 		}
					// 	}
					// });
					this.show = true

				} else {
					this.$refs.passInput.open();
				}

				// const res = await this.$api.createorder({
				// 	par_pwd: e.pass,
				// 	order_key: this.goodsInfo.order_key
				// })
				// this.order_sn = res.data.order_sn
				// if (res && res.code == 1) {
				// 	this.total_money = this.goodsInfo.view_total_order_price
				// 	this.view_user_money = this.goodsInfo.view_user_money

				// }

			},
			// 去设置
			goset() {
				this.show = false
				this.navTo('/pages/setting/setPassword')
			},
			notjBtn() {
				console.log(this.goodsInfo.view_user_money < this.goodsInfo.view_total_order_price)
				if (this.goodsInfo.view_user_money < this.goodsInfo.view_total_order_price) {
					return this.$utils.msg(this.$t('shop').可用余额不足)
				}
				if (this.goodsInfo.view_total_order_price > this.goodsInfo.view_month_cap) {
					return this.$utils.msg(this.$t('shop').已超过兑换上限)
				}
			},
			// 清除密码
			clear() {

			},
			// 输入密码
			async confirm(e) {
				// const res = await this.$api.balancepay({
				// 	par_pwd: e.pass,
				// 	order_sn: this.order_sn
				// })
				const res = await this.$api.createorder({
					par_pwd: e.pass,
					order_key: this.goodsInfo.order_key
				})
				if (res && res.code == 1) {
					uni.redirectTo({
						url: "/pages/mine/order-win"
					})
					uni.removeStorageSync('ztfsObj')
				} else {
					this.$utils.msg(res.msg)
					setTimeout(() => {
						this.$refs.passInput.clear()
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.top-box {
		background: #F44A42;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.site-box {
		background: #ffffff;
		padding: 24rpx;
		margin-bottom: 16rpx;

		.site-name {
			font-size: 30rpx;
			font-weight: bold;
		}

		.site-xq {
			// font-size: 24rpx;
			margin-top: 24rpx;
		}
	}

	.good-box {
		background: #ffffff;
		margin-bottom: 16rpx;
		padding: 24rpx;

		.good-img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 10rpx;
		}

		.good-right {
			width: 526rpx;
			box-sizing: border-box;
			padding-left: 24rpx;

			.good-name {
				color: #2A2A2A;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 12rpx;
			}

			.good-gg {
				font-size: 24rpx;
			}

			.good-price {
				color: #2A2A2A;
				font-size: 30rpx;
				font-weight: bold;
			}

			.good-num {
				font-size: 24rpx;
			}
		}
	}

	.list-box {
		background: #ffffff;
		padding: 32rpx 24rpx;
		margin-bottom: 16rpx;

		.list-text {
			font-size: 28rpx;
		}

		.list-tx {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100rpx;
			margin-right: 22rpx;
		}

		.list-news {
			font-size: 28rpx;
		}

		.list-sel {
			color: #F23C4B;
			font-size: 28rpx;
		}

		.list-num {
			color: #F23C4B;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.dh-box {
		width: 100vw;
		background: #ffffff;
		padding: 14rpx 32rpx;
		background: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;

		.dh-btn {
			border-radius: 100rpx;
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: #F44A42;
			font-size: 32rpx;
			color: #ffffff;
		}

		.dh-nobtn {
			border-radius: 100rpx;
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: #9C9C9C;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
</style>